<template>
    <div class="addChannel">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
            <el-form-item label="渠道级别" prop="resource" v-if="level!=1">
    <el-radio-group v-model="ruleForm.level" disabled >
      <el-radio :label="1">一级</el-radio>
      <el-radio :label="2">二级</el-radio>
      <el-radio :label="3">三级</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="所属一级渠道" prop="region" v-if="level==2">
    <el-select v-model="ruleForm.region" placeholder="请选择一级渠道" disabled>
    </el-select>
  </el-form-item>
  <el-form-item label="所属二级级渠道" prop="region" v-if="level==3">
    <el-select v-model="ruleForm.region" placeholder="请选择二级渠道" disabled>
    </el-select>
  </el-form-item>
  <el-form-item label="渠道名称" prop="title" v-if="level==1">
    <el-input v-model="ruleForm.title" class="form-input" :disabled="isView"></el-input>
  </el-form-item>
  <el-form-item label="二级渠道名称" prop="title" v-if="level==2" >
    <el-input v-model="ruleForm.title" class="form-input" :disabled="isView"></el-input>
  </el-form-item>
  <el-form-item label="三级级渠道名称" prop="title" v-if="level==3">
    <el-input v-model="ruleForm.title" class="form-input" :disabled="isView"></el-input>
  </el-form-item>
  <el-form-item label="排序" prop="order_value">
    <el-input v-model="ruleForm.order_value" class="form-input" type="number" :disabled="isView"></el-input>
  </el-form-item>
        </el-form>
        <div class="check-button" v-if="!isView">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
    </div>
</template>
<script>
import { getChannels,getChannel,saveChannel } from '@/api/channel.js'
export default {
  props:{
    level:{},
    changeItem:{},
    isAdd:{},
    isView:{}
  },
    data() {
        return {
            ruleForm: {
            title: '',
            level: '',
            order_value:'1',
            region:'',
            parent_id:'',
            id:''
        },
        rules: {
          title: [
            { required: true, message: '请输入渠道名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
        }  
        }
    },
    methods: {
      cancel(){
        this.$emit('cancel')
      },
      submitForm() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            let obj={
              "id": this.ruleForm.id,
              "title":this.ruleForm.title,
              "order_value":this.ruleForm.order_value,
              "level": this.ruleForm.level,
              "parent_id": this.ruleForm.parent_id
            }
            saveChannel(obj).then(res=>{
              if(this.isAdd){
                this.$message.success('添加成功');
              }
              else{
                this.$message.success('修改成功');
              }
              this.$emit('success',obj.parent_id,res.data.top_channel_id)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    watch: {
      level(newV){
        this.ruleForm.level=newV
      },
      changeItem(newV){
       this.changeItem=newV
       if(this.changeItem=='')
    {
     return 
    }
       getChannel({
        id:newV
      }).then(res=>{      
        if(!this.isAdd){
          this.ruleForm.region=res.data.parent_channel_title
          this.ruleForm.title=res.data.title
          this.ruleForm.parent_id=res.data.parent_channel_id
          this.ruleForm.id=res.data.id
        }
        else{
          this.ruleForm.region=res.data.title
          this.ruleForm.parent_id=res.data.id
        }
      })
      }
    },
    mounted() {
      this.ruleForm.level=this.level
      if(this.changeItem=='')
    {
     return 
    }
      getChannel({
        id:this.changeItem
      }).then(res=>{
        if(!this.isAdd){
          this.ruleForm.region=res.data.parent_channel_title
          this.ruleForm.title=res.data.title
          this.ruleForm.parent_id=res.data.parent_channel_id
            this.ruleForm.id=res.data.id
        }
        else{
          this.ruleForm.region=res.data.title
          this.ruleForm.parent_id=res.data.id
        }
      })
    },
}
</script>
<style lang="scss" scoped>
    .addChannel{
        .form-input{
            width: 217px;
        }
        .check-button{
            text-align: center;
        }
    }
</style>